import React, { useState, useEffect } from "react";

function Clock() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setDate(new Date());
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  const secondHandStyle = {
    transform: `rotate(${seconds * 6}deg)`,
  };

  const minuteHandStyle = {
    transform: `rotate(${minutes * 6}deg)`,
  };

  const hourHandStyle = {
    transform: `rotate(${hours * 30 + minutes * 0.5}deg)`,
  };

  return (
    <div style={{ width: "200px", height: "200px", border: "2px solid #fff", borderRadius: '50%', display: "flex", justifyContent: "center", alignItems: "center", marginTop: "40px", marginLeft: "10px", position: "relative" }}>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(180deg)" }}></div>
      <div style={{ width: "2px", height: "100px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 100px)", transformOrigin: "bottom center", transform: "rotate(90deg)" }}></div>
      <div style={{ width: "2px", height: "100px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 100px)", transformOrigin: "bottom center", transform: "rotate(270deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center" }}></div>
      <div style={{ width: "2px", height: "60px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 60px)", transformOrigin: "bottom center" }}></div>
      <div style={{ width: "2px", height: "40px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 40px)", transformOrigin: "bottom center" }}></div>
      <div style={{ width: "2px", height: "20px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 20px)", transformOrigin: "bottom center" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(30deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(60deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(90deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(120deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(150deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(180deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(210deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(240deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(270deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(300deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(330deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center" }}></div>
      <div style={{ width: "2px", height: "60px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 60px)", transformOrigin: "bottom center" }}></div>
      <div style={{ width: "2px", height: "40px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 40px)", transformOrigin: "bottom center" }}></div>
      <div style={{ width: "2px", height: "20px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 20px)", transformOrigin: "bottom center" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(30deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(60deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(90deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(120deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(150deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(180deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(210deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(240deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(270deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(300deg)" }}></div>
      <div style={{ width: "2px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", transform: "rotate(330deg)" }}></div>
      <div style={{ width: "2px", height: "60px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 60px)", transformOrigin: "bottom center" }}></div>
      <div style={{ width: "2px", height: "40px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 40px)", transformOrigin: "bottom center" }}></div>
      <div style={{ width: "2px", height: "20px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 20px)", transformOrigin: "bottom center" }}></div>
      <div style={{ width: "6px", height: "4px", background: "#fff", borderRadius: "50%", position: "absolute", left: "calc(50% - 3px)", top: "calc(50% - 2px)", transformOrigin: "bottom center", transform: "rotate(180deg)" }}></div>
      <div style={{ width: "4px", height: "80px", background: "#fff", position: "absolute", left: "calc(50% - 2px)", top: "calc(50% - 80px)", transformOrigin: "bottom center", ...hourHandStyle }}></div>
      <div style={{ width: "3px", height: "100px", background: "#fff", position: "absolute", left: "calc(50% - 1.5px)", top: "calc(50% - 100px)", transformOrigin: "bottom center", ...minuteHandStyle }}></div>
      <div style={{ width: "2px", height: "120px", background: "#fff", position: "absolute", left: "calc(50% - 1px)", top: "calc(50% - 120px)", transformOrigin: "bottom center", ...secondHandStyle }}></div>
      <div style={{ width: "12px", height: "12px", background: "#fff", borderRadius: "50%", position: "absolute", left: "calc(50% - 6px)", top: "calc(50% - 6px)" }}></div>
    </div>
  );
}

export default Clock;
